import 'package:flutter/material.dart';

import 'chat_model.dart';
import 'chat_viewmodel.dart';
import 'event_bus.dart';
import 'chat_type.dart';

class ChatEmojiView extends StatefulWidget {
  const ChatEmojiView({
    Key? key,
  }) : super(key: key);

  @override
  ChatEmojiViewState createState() => ChatEmojiViewState();
}

class ChatEmojiViewState extends State<ChatEmojiView> {
  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.green,
        child: Stack(
          children: [_buildGridView(), _buildActioView()],
        ));
  }

  _buildGridView() {
    return GridView.builder(
        padding: const EdgeInsets.fromLTRB(15, 15, 15, 80),
        itemCount: ChatViewModel.emojis.length,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 8, //每行个数
          crossAxisSpacing: 15, //左右
          mainAxisSpacing: 15, //上下
        ),
        itemBuilder: (ctx, index) {
          return GestureDetector(
            onTap: () {
              String emojisStr = "[${ChatViewModel.emojis[index]}]";
              eventBus.fire(EmojiModel(type: EmojiType.emoji, str: emojisStr));
            },
            child: Image.asset(
                "lib/expression/${ChatViewModel.emojis[index]}.png",
                fit: BoxFit.cover),
          );
        });
  }

  _buildActioView() {
    return Positioned(
        bottom: 20,
        right: 10,
        child: Container(
            width: 120,
            height: 50,
            color: const Color(0x7FF0F8FF),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                SizedBox(
                    width: 50,
                    height: 40,
                    child: TextButton(
                        style: ButtonStyle(
                            backgroundColor:
                                MaterialStateProperty.all<Color>(Colors.blue)),
                        onPressed: () {
                          eventBus.fire(EmojiModel(type: EmojiType.delete));
                        },
                        child: const Text(
                          "删除",
                          style: TextStyle(color: Colors.white),
                        ))),
                SizedBox(
                  width: 50,
                  height: 40,
                  child: TextButton(
                      style: ButtonStyle(
                          backgroundColor:
                              MaterialStateProperty.all<Color>(Colors.blue)),
                      onPressed: () {
                        eventBus.fire(EmojiModel(type: EmojiType.send));
                      },
                      child: const Text(
                        "发送",
                        style: TextStyle(color: Colors.white),
                      )),
                )
              ],
            )));
  }
}
